<template>
    <div class="header block">
        <div class="row">
            <div>
                <span>人员名称：</span>
                <span>{{ peopleInfo.workerName }}</span>
                <el-date-picker
                    class="month-picker"
                    v-model="month"
                    type="month"
                    format="YYYY-MM月账单"
                    value-format="YYYY-MM"
                    @change="onMonth"
                />
            </div>
            <div>
                <span class="key">加入时间：</span>
                <span class="value">{{ peopleInfo.createTime }}</span>
            </div>
        </div>
        <div class="row basic">
            <div>
                <span class="key">性别：</span>
                <span class="value">{{
                    peopleInfo.sex === '0' ? '男' : '女'
                }}</span>
                <span class="key">身份证号：</span>
                <span class="value">{{ peopleInfo.idCardNo }}</span>
                <span class="key">手机号：</span>
                <span class="value">{{ peopleInfo.phone }}</span>
                <span class="key">共领薪：</span>
                <span class="value important"
                    >{{ peopleInfo.getTotalMoney }}元</span
                >
                <span class="key">共发薪：</span>
                <span class="value important"
                    >{{ peopleInfo.payTotalMoney }}元</span
                >
            </div>
        </div>
    </div>
    <div class="container block">
        <div class="header">
            <div class=""></div>
            <div class="download">
<!--                <button class="btn-green download-btn" @click="onExport">-->
<!--                    <i class="el-icon el-icon-download" />-->
<!--                    下载领薪详细-->
<!--                </button>-->
                <export-button type="success" @export="onExport">下载领薪详细</export-button>

            </div>
        </div>
        <div class="table">
            <el-table
                :data="tableData"
                style="width: 100%"
                :header-row-style="{ color: '#202536' }"
                :row-style="{ color: '#5E617D' }"
            >
                <el-table-column prop="serveCompanyName" label="派遣单位名" />
                <el-table-column prop="projectName" label="项目名" />
                <el-table-column prop="payTotalMoney" label="发薪金额" />
                <el-table-column prop="getTotalMoney" label="已领金额" />
                <el-table-column prop="unGetSalary" label="未领金额" />
                <el-table-column prop="createTime" label="加入时间" />
                <el-table-column prop="getSalaryTime" label="最近领薪时间" />
            </el-table>
            <el-pagination
                class="pagination"
                v-model:currentPage="pageNum"
                v-model:page-size="pageSize"
                :page-sizes="[10, 30, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import {
    getWorkerRecord,
    getWorkerInfo,
    WorkInfo,
    WorkerDto
} from '@/api/workers'
import { exportWorkerPayRecord } from '@/api/export'
import { dateFormat } from '@/utils/util'

export default defineComponent({
    name: 'BookDetail',
    data () {
        return {
            pageSize: 10,
            pageNum: 1,
            total: 0,
            tableData: [] as WorkInfo[],
            month: '',
            peopleInfo: {} as WorkerDto
        }
    },
    created () {
        this.month = dateFormat('YYYY-mm', new Date())
        this.onMonth()
    },
    methods: {
        onMonth () {
            if (!this.month) {
                return
            }
            this.pageNum = 1
            getWorkerInfo({
                userId: this.$route.params.id as string,
                queryMonth: this.month
            }).then(res => {
                this.peopleInfo = res
            })
            this.getWorkerRecord()
        },
        getWorkerRecord () {
            getWorkerRecord({
                userId: this.$route.params.id as string,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                queryMonth: this.month
            }).then(res => {
                this.tableData = res.list
            })
        },
        handleCurrentChange () {
            this.getWorkerRecord()
        },
        handleSizeChange () {
            this.pageNum = 1
            this.handleCurrentChange()
        },
        async onExport () {
            const result = await exportWorkerPayRecord({
                userId: this.$route.params.id as string,
                queryMonth: this.month
            })
            window.location.href =
                process.env.VUE_APP_BASE_URL +
                    '/common/download?delete=true&fileName=' +
                    result

            this.$message.success('导出成功！')
        }
    }
})
</script>

<style lang="stylus" scoped>
table()
.header.block{
    padding 20px
}
.basic
    margin-top 20px
.value
    margin-right 30px
:deep() .month-picker
    margin-left 20px
:deep() .el-input--prefix .el-input__inner
    padding-right 0
    background white
    // border unset
    position relative

.download-btn
    width 120px

.value.important
    color color-red
    font-style italic
</style>
